<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
        series: [
            {
                type: 'sankey',
                orient: 'horizontal', // horizontal | vertical
                nodeWidth: 20,
                nodeGap: 30,
                data: [
                    {
                        name: '生产'
                    },
                    {
                        name: '销售'
                    },
                    {
                        name:'二次加工'
                    },
                    {
                        name: '库存'
                    }
                ],
                links: [
                    {
                        source: '生产',
                        target: '销售',
                        value: 5000
                    },
                    {
                        source: '生产',
                        target: '库存',
                        value: 4000
                    },
                    {
                        source: '生产',
                        target: '二次加工',
                        value: 3000
                    },
                    {
                        source: '销售',
                        target: '库存',
                        value: 1000
                    },
                ]
            }
        ]
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  